<template>
	<div class="system-add-menu-container">
		<el-dialog title="订单详情" v-model="isShowDialog" width="769px">
			<el-form :model="showData" size="small" label-width="80px">
				<el-row :gutter="30">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="订单编号: ">
							<el-input v-model="showData.orderId" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="买家昵称: ">
							<el-input v-model="showData.buyerName" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="30">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="买家电话: ">
							<el-input v-model="showData.buyerMobile" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="买家地址: ">
							<el-input v-model="showData.buyerAddress" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="30">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="总 金 额: ">
							<el-input v-model="showData.orderAmount" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="支付方式: ">
							<!-- :disabled="true" -->
							<el-input v-model="showData.payType" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="30">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="支付状态: ">
							<el-input v-model="showData.payStatus" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="订单状态: ">
							<el-input v-model="showData.orderStatus" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="30">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="下单时间: ">
							<el-input v-model="showData.createTime" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="30">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="下单备注:">
							<el-input width="200%" v-model="showData.remark" type="textarea" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="下单备注: ">
							<el-input type="textarea" v-model="showData.remark" :disabled="true"></el-input>
						</el-form-item>
					</el-col> -->
				</el-row>
			</el-form>

			<!-- 商品详细信息 start -->
			<!-- productName: '辣椒炒肉',
                productPrice: 21.00,
                productIcon: 
                categoryName: '好吃美味',
                quantity: 1,  -->
			<el-table :data="showData.orderDetailList" border show-summary :summary-method="getSummaries" style="width: 100%" row-key="path">
				<el-table-column label="订单详细编号" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.detailId }}
					</template>
				</el-table-column>
				
				<el-table-column label="商品名称" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.productName }}
					</template>
				</el-table-column>

				<el-table-column label="商品价格" show-overflow-tooltip>
					<template #default="scope">￥{{ scope.row.productPrice}} </template>
				</el-table-column>

				<el-table-column label="商品图片" show-overflow-tooltip>
					<template #default="scope">
						<el-image							
							style="width: 40px; height: 40px"
							:src="scope.row.productIcon"
							:initial-index="scope.$index"
							:preview-src-list="srcList"
							fit="cover"
						>
						</el-image>
					</template>
				</el-table-column>

				

				<el-table-column label="数量" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="sucess" size="small"><span>x</span>{{ scope.row.productQuantity }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="小计" show-overflow-tooltip>
					<template #default="scope">￥{{scope.row.productQuantity * scope.row.productPrice}} </template>
				</el-table-column>
			</el-table>
<!-- srcList.length -->
			<!-- 商品详细信息 end	 -->
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { toRaw, reactive, toRefs, onMounted, } from 'vue';
import { useStore } from '/@/store/index';
import { i18n } from '/@/i18n/index';
import IconSelector from '/@/components/iconSelector/index.vue';

// element-plus 示例TS语法
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';

interface Product {
	productName: string;
	productPrice: string;
	quantity: number;

}

interface SummaryMethodProps<T = Product> {
	columns: TableColumnCtx<T>[];
	data: T[];
}
//

export default {
	name: 'OrderDetails',
	components: {
		IconSelector,
	},
	
	setup() {
		const store = useStore();
		const state = reactive({
		
			srcList: [] as any[],
			isShowDialog: false,
			showData: new Object(),
		});

		const openDialog = (row: any) => {
			state.showData = row;

			console.log("----");
			// for(let a in row) {
			// 	console.log(a);
			// }
			console.log(row);
			// 遍历将图片添加到预览中
			// srcList  下面不这样去写的话就会发生TS错误
			let arrmy: any[] = [];
			let arr: any[] = row.orderDetailList;
			arr.forEach(function (item, index) {
				arrmy.push(item.productIcon);
			});
			state.srcList = arrmy;
			
			state.isShowDialog = true;
		};

		// 打开弹窗
		// const openDialog = (row: Object) => {
		// 	console.log(row);
		// 	state.isShowDialog = true;

		// 	state.showData = row;

		// };
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 是否内嵌下拉改变
		const onSelectIframeChange = () => {};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			closeDialog(); // 关闭弹窗
			// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
		};
		// 页面加载时 进行数据绑定。
		onMounted(() => {});

		// 对于订单详情之中有一个计算订单总数的最后一列的总订单值
		const getSummaries = (param: SummaryMethodProps) => {
			// console.log(param);
			const { columns, data } = param;
			const sums: Object[] = [];

			let arr4 = 0; // 数量
			let arr5 = 0; // 总金额
			const values = data.map((item) => {
				arr4 += item.productQuantity;
				arr5 += Number(item.productQuantity) * Number(item.productPrice);
			});
		
			sums[0] = '合计';
			sums[4] = `共${arr4}件`; 
			sums[5] = `￥${arr5}`;

			return sums;
		};

		return {
			getSummaries, // 表格的最后一列展示的数据

			openDialog,
			closeDialog,
			onSelectIframeChange,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
.demo-image__error .image-slot {
	font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
	font-size: 30px;
}
.demo-image__error .el-image {
	width: 100%;
	height: 200px;
}
</style>